<template>
	<view>
		<view v-show="show" class="guide">
			<image class="jt" src="../../static/order/jiantou.png" mode="widthFix"></image>
			<view> 支付宝支付请使用浏览器进行支付,</view>
			<view v-if="isWeixin && !isIOS"> 请在菜单中选择浏览器打开</view>
			<view v-else-if="isWeixin && isIOS"> 请在菜单中选择Safari打开</view>
			<view class="wctxt" @click="goBack">
				<text>已完成支付？点击此链接返回上一页面</text>
			</view>
		</view>
		<div class="body">
		</div>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				show: false,
				isWeixin: false,
				isIOS: false,
				params: undefined
			};
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '支付宝支付'
			});
		},
		onLoad(options) {
			this.params = options
			this.IsWeixin();
		},
		methods: {
            IsWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				this.isWeixin = /micromessenger/i.test(ua);
				this.isIOS = /iphone|ipad|ipod/i.test(ua);
                //判断当前环境是否为微信浏览器，在微信浏览器中就显示引导页，在外部浏览器直接请求支付
				if (!this.isWeixin) {
					if (this.params) {
						this.getAliPayInfo()
					} else {
						uni.showModal({
							showCancel: false,
							title: '支付参数错误',
							success() {
								uni.navigateBack({});
							}
						})
					}
				} else {
					this.show = true;
				}
			},
			getAliPayInfo(params) {
				let that = this
                //外部浏览器请求支付接口，此处用的uview封装的请求，没用uview的可用原生request，请求头除token外其他可根据项目自行携带
				uni.$u.http.get('/h5/order/payByAlipay', {
					params: that.params,
					header: {
						token: that.params.token,
						'content-type': 'application/json;charset=UTF-8'
					}
				}).then(res => {
                    //请求跳转期间显示文案
					document.querySelector('body').innerHTML = '正在请求打开支付宝......';
					//拿到支付链接直接前往或打开，我请求成功是后端返回的支付宝支付链接
                    //示例链接：https://payment.5upay.com/receipt/redirect/index/a4d489302bad4875998d4261c9664ec7/da06d2a30fbc43f590bb8cf7076a15eb
                    window.location.href = res
				}).catch(err => {
					console.log('支付接口异常信息：', err);
				})
			},
			goBack(){
				uni.navigateBack()
			}
		}
	};
</script>
 
<style lang="scss">
	.wctxt{
		margin-top: 70px;
		text{
			text-decoration: underline;
		}
	}
	
	.guide {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .6);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		color: #fff;
		font-size: 16px;
 
		.jt {
			width: 94rpx;
			margin-left: 600rpx;
			margin-top: 20px;
			margin-bottom: 20px;
		}
	}
</style>